<template>
    <div id="signin">
    	<header id="header">
    		<a>返回</a>
    		<h1>登录</h1>
    	</header>
    	<div id="m-container">
    	<el-form :model='userInfo' :rules='rules' ref='userInfo'>
    		<ul>
    			<li>
    				<el-form-item prop='accountName'>
		    			<el-input placeholder='请输入账号'
		    			v-model='userInfo.accountName'>
		    			</el-input>
		    		</el-form-item>
    			</li>
    			<li>
    				<el-form-item prop='password'>
		    			<el-input placeholder='请输入密码'
		    				type='password'
		    			v-model='userInfo.password'>
		    			</el-input>
		    		</el-form-item>
    			</li>
    			<li>
    				<el-button type='danger'
		    		style='width: 100%;'
		    		@click='Signin'>登录</el-button>    	
    			</li>
    		</ul>
    	</el-form>
    	</div>
    	<p id="otherLogin"
		style="margin-top: 200px;">
    		其他方式登录：
    		<button>用QQ登录</button>
    	</p>
    </div>
</template>
<script>
export default {
	data(){
		return {
			userInfo:{
				accountName:'zmt',
				password:12345
			},
			rules:{
				userName:{required:true,message:'输入不能为空',trigger:'blur'},
				password:{required:true,message:'输入不能为空',trigger:'blur'}
			}
		}
	},
    methods:{
    	Signin(){
    		this.$refs['userInfo'].validate((valid)=>{
    			if(valid){
		    		this.$http.post(this.$apis.Signin,this.userInfo)
		    		.then((resp)=>{
		    			if(resp.data.success){
			    			console.log(resp)
			    			localStorage.setItem('token',resp.data.token)
				    		localStorage.setItem('response',JSON.stringify(resp.data.response))
							if(this.$route.query.redirect){
								this.$router.push(this.$route.query.redirect);
							}else{
								this.$router.push('/Home')
							}
		    			}else{
		    				alert('账号或密码输入错误')
		    			}
		    		})
    			}
    		})
    	}
    }
}
</script>
<style lang="scss" scoped>
#signin{
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	background: lightgray;
}
#header{
	width: 100%;
	height: 60px;
	background: red;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	h1{
		font-size: 25px;
	}
	a{
		position: relative;
		right: 120px;
	}
}
#m-container{
	width: 90%;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.el-form{
		width: 100%;
	}
}
</style>